<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>热门景点详情</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			ul {
				list-style: none;
			}
			a {
				text-decoration: none;
			}
			.center {
				width: 1000px;
				margin: 0 auto;
			}
			body {
				background-color: #2B95D3;
			}
			.nav+.center .txt {
				color: #fff;
				padding: 8px 0;
				font-size: 14px;
			} 
			/*****************风景展示区**********************/
			.show .center {
				display: flex;
				box-shadow: 0 5px 20px rgba(0, 0, 0, .3);
			}
			.show .col1-1 img {
				display: block;
				width: 500px;
				height: 100%;
			}
			.show .col1-2 {
				background-color: #fff;
				padding: 15px;
			}
			.show .col1-2 h3 {
				color: #636363;
				font-size: 24px;
			}
			.show .col1-2 .price h3 {
				color: #f00;
				font-size: 20px;
				margin: 10px;
			}
			.show .col1-2>div {
				display: flex;
				align-items: center;
				font-size: 14px;
			}
			.show .col1-2 div>p {
				color: #949494;
				padding-left: 5px;
				line-height: 30px;
			}
			.show .col1-2 .icon1 {
				width: 30px;
				height: 30px;
				background: url(img/icon.png) no-repeat -450px -295px;
			}
			.show .col1-2 .icon2 {
				width: 30px;
				height: 30px;
				background: url(img/icon.png) no-repeat -450px -319px;
				
			}
			.show .col1-2 .icon3 {
				width: 30px;
				height: 30px;
				background: url(img/icon.png) no-repeat -450px -350px;
			}
			.show .col1-2 .icon4 {
				width: 30px;
				height: 30px;
				background: url(img/icon.png) no-repeat -450px -405px;
			}
			.show .col1-2 div:last-child .last .icon4 {
				float: left;
			}
			.show .col1-2 div:last-child .last h4 {
				float: left;
				line-height: 30px;
			}
			/****************相关信息查询 二楼***********************************/
			.f2 {
				margin: 30px 0;
			}
			.f2 .main .box1 {
				display: flex;
			}
			.f2 .main .box1 a {
				display: block;
				width: 100px;
				height: 30px;
				background-color: #999;
				margin-right: 20px;
				color: #fff;
				font-size: 14px;
				font-weight: 600;
				text-align: center;
				line-height: 30px;
			}
			.f2 .main a:first-child:active {
				background-color: #0054A7;
			}
			.f2 .main a:nth-child(2):active {
				background-color: #FF9B00;
			}
			.f2 .main a:nth-child(3):active {
				background-color: #CA0074;
			}
			.f2 .main div[class^="detail"]{
				width: 100%;
				border: 1px solid #aaa;
				display: none;
				background-color: #fff;
			}
			.f2 .main div[class^="detail"]:target {
				display: block;
			}
			.f2 .main ul {
				display: flex;
				justify-content: space-around;
				margin-top: 15px;
			}
			.f2 .main ul li {
				width: 300px;
				height: 250px;
				position: relative;
				
			}
			.f2 .main ul li a {
				width: 100%;
			}
			.f2 .main .detail1 ul li img {
				display: block;
				width: 100%;
				height: 80%;
			}
			.f2 .main .detail1 ul li p {
				position: absolute;
				bottom: 20%;
				background-color: rgba(0, 0, 0, .6);
				color: #e8e8e8;
				height: 40px;
				line-height: 40px;
				padding: 0 10px;
				box-sizing: border-box;
				width: 100%;
			}
			.f2 .main .detail3 ul li img {
				display: block;
				width: 100%;
				height: 180px;
			}
			.f2 .main .detail3 ul li p {
				position: absolute;
				color: #949494;
			}
			.f2 .main .detail3 ul li a>div {
				position: absolute;
				bottom: 5%;
			}
			.f2 .main .detail3 ul li a>div span {
				display: inline-block;
				background-color: skyblue;
				padding: 5px 10px;
				color: #fff;
				font-size: 12px;
				border-radius: 5px;
			}
			/***************详情介绍****************************/
			.introduce .main {
				background-color: #fff;
				overflow: hidden;
			}
			.introduce .main>div:first-child {
				display: flex;
				margin: 20px 0 0;
			}
			.introduce .main>div:first-child span:first-child {
				background-color: #00D2C6;
				padding: 5px 10px;
				color: #fff;
			}
			.introduce .main>div:first-child>span:last-child {
				width: 0;
				border: 15px solid #00D2C6;
				border-right-color: transparent;
			}
			.introduce .main>div:last-child {
				padding: 50px;
			}
			.introduce .main>div:last-child p {
				text-indent: 2em;
				color: #777;
				line-height: 2em;
			}
			.introduce .main>div:last-child img {
				display: block;
				width: 80%;
				margin: 10px auto;
			}
			.introduce .main>div:last-child h4 {
				color: #E47214;
				margin: 32px;
			}
		</style>
	</head>
	<body>
		<div class="nav">
			<iframe src="nav.html" frameborder="0" width="100%" height="100px" scrolling="no"></iframe>
		</div>
		
		<div class="center">
			<div class="txt">当前位置</div>
		</div>
		
		<div class="show">
			<div class="center">
				<div class="col1-1">
					<img src="img/scenery/1.jpg">
				</div>
				<div class="col1-2">
					<div>
						<h3>普陀山风景名胜区</h3>
					</div>
					<div class="price">
						<h3>￥160起</h3>
					</div>
					<div>
						<div class="icon1"></div>
						<h4>地址：</h4>
						<p>舟山普陀山</p>
					</div>
					<div>
						<div class="icon2"></div>
						<h4>开放时间：</h4>
						<p>06:30—21:50</p>
					</div>
					<div>
						<div class="icon3"></div>
						<h4>适宜季节：</h4>
						<p>全年</p>
					</div>
					<div>
						<div class="last">
							<div class="icon4"></div>
							<h4>门票信息：</h4>
							<p>1月份、12月份，门票120元/人次；2月份至11月份，门票160元/人次；正月初一至初五、五月一日至三日、十月一日至五日，门票180元/人次。</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<div class="f2">
			<div class="center">
				<div class="main">
					<div class="box1">
						<a href="#c1">相关线路</a>
						<a href="#c3">最新攻略</a>
					</div>
					<div class="detail1" id="c1">
						<ul>
							<li>
								<a href="#">
									<img src="img/scenery/1.jpg">
									<p>观音道场朱家尖、普陀山二日游</p>
								</a>			
							</li>
							<li>
								<a href="#">
									<img src="img/scenery/2.jpg">
									<p>普陀山礼佛观光之旅</p>
								</a>	
							</li>
							<li>
								<a href="#">
									<img src="img/scenery/3.jpg">
									<p>普陀山南海祈福三日游</p>
								</a>
							</li>
						</ul>
					</div>
					<div class="detail3" id="c3">
						<ul>
							<li>
								<a href="#">
									<img src="img/method/1.jpg">
									<p>衢山四天三夜之旅</p>
									<div>
										<span>主题游</span>
										<span>亲子游</span>
									</div>
								</a>
								
							</li>
							<li>
								<a href="#">
									<img src="img/method/2.jpg">
									<p>朱家尖海滨度假自驾游自由行</p>
									<div>
										<span>主题游</span>
										<span>亲子游</span>
									</div>
								</a>
								
							</li>
							<li>
								<a href="#">
									<img src="img/method/3.jpg">
									<p>普陀山礼佛观光之旅</p>
									<div>
										<span>主题游</span>
										<span>亲子游</span>
									</div>
								</a>
								
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		
		<div class="introduce">
			<div class="center">
				<div class="main">
					<div>
						<span>景区介绍</span>
						<span></span>
					</div>
					<div>
						<p>普陀山风景名胜区位于浙江杭州湾以东约100海里，是舟山群岛中的一个小岛。全岛面积12.5平方公里，呈狭长形，南北最长处为8.6里，东西最宽外3.5公里。
						</p>
						<p>普陀山风景名胜区素有海天佛国、南海圣境之称，是首批国家重点风景名胜区。最高处佛顶山，海拔约300米。东达日本，北接登莱，南亘欧闽，西通吴会，是中国的东大门。五代后梁贞明二年(公元916年)，日僧慧锷自五台山请观音像归国，途经普陀山被大风所阻，于紫竹林结茅留居，建不肯去观音院。历朝相继在此兴建寺院，以供奉观音菩萨为主。普陀山也就成为中国四大佛教道场之一。
						</p>
						<img src="img/scenery/introduce/1.jpg" alt="">
						<h4>主要景点</h4>
						<p>普陀山风景名胜区作为佛教胜地，最盛时有82座寺庵，128处茅篷，僧尼达4000余人。其中普济、法雨、慧济三大寺规模宏大，建筑考究，是中国清初寺庙建筑群的典型。普济禅寺始建于宋，为山中供奉观音的主刹，建筑总面积约11000多平方米。		
						</p>
						<img src="img/scenery/introduce/2.jpg" alt="">
						<p>普陀山风景名胜区奇岩怪石很多。著名的有磐陀石、二龟听法石、海天佛国石等二十余处。在山海相接之处有许多石洞胜景，最著名的是潮音洞和梵音洞。岛的四周有许多沙滩，但主要的是百步沙和千步沙。千步沙是一个弧形沙滩，长约3里，沙细坡缓，沙面宽坦柔软，是一个优良的海水浴场。夏天去游览，可带上游泳衣在这里畅游。
						</p>
						<h4>普济禅寺</h4>
						<p>普济禅寺又称前寺，始建于宋元丰年间，是普陀山风景名胜区第一大寺，也是中国重点寺院，历代全山方丈均住锡于此。寺院规模宏大，有"五步一楼，十步一阁"之称，全寺殿堂六进，自南向北贯串在一条中轴线上。其中大圆通殿是普济寺主殿，殿中供奉高8.8米的毗卢观音为菩萨正身法像，两边端坐观音"三十二应身"，以示观音大士感应世间万物众生。
						</p>
						<img src="img/scenery/introduce/3.jpg" alt="">
						<h4>法雨禅寺</h4>
						<p>法雨禅寺始建于明，依山凭险，层层叠建，周围古木参天，极为幽静。法雨寺又称后寺，初名海潮庵，清康熙三十八年赐天华法雨匾额，遂称法雨禅寺。建筑布局依山取势，分群递升，宏大高远，气象超凡。其中九龙殿最为辉煌，该佛殿是从南京明故宫整体搬迁而来的，为目前中国寺院建筑规格最高的一座佛殿。殿内有普陀山风景名胜区三宝之一的九龙藻井，精工巧作，栩栩如生，艺术价值极高，为国家级文物。
						</p>
						<div>
							<img src="img/scenery/introduce/fayuchansi_1.jpg" alt="">
						</div>
						<br>
						<br>
					</div>
				</div>
			</div>
		</div>
		
		<div class="foot">
				<iframe src="foot.html" frameborder="0" width="100%" scrolling="no" height="300px"></iframe>
		</div>
		
		
	</body>
</html>